<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="班组详情"></u-navbar>

		<view class="d-p-30" v-if="info">
			<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">班组信息</view></view>
			<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
				<view class="" style="color: #949AA2;">所属单位</view>
				<view class="d-flex-1 d-p-l-30 d-text-right" style="color: #162233;">{{ info.deptName || '无数据源' }}</view>
			</view>
			<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
				<view class="" style="color: #949AA2;">项目名称</view>
				<view class="d-flex-1 d-p-l-30 d-text-right" style="color: #162233;">{{ info.gcmc || '无数据源' }}</view>
			</view>
			<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
				<view class="" style="color: #949AA2;">班组名称</view>
				<view class="d-flex-1 d-p-l-30 d-text-right" style="color: #162233;">{{ info.bzmc || '无数据源' }}</view>
			</view>
			<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
				<view class="" style="color: #949AA2;">班组长</view>
				<view class="d-flex-1 d-p-l-30 d-text-right" style="color: #162233;">{{ info.bzzxm || '无数据源' }}</view>
			</view>
			<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
				<view class="d-flex-1" style="color: #949AA2;">班组长联系电话</view>
				<view><u--text color="#21A5F3" size="24rpx" mode="phone" call :text="info.bzzlxdh || '无数据源'"></u--text></view>
			</view>

			<view class="d-m-t-50">
				<text class="d-font-36" style="font-weight: bold;">班组成员信息</text>
				<text class="d-font-24" style="color: #21A5F3;font-weight: bold;">（{{ info.cyrs }}人）</text>
			</view>
			<view class="d-p-30 d-font-28">
				<view class="d-flex" v-for="(item, index) in list" :key="index" style="height: 100rpx;" @click="memberDetail(item)">
					<view class="u-line-1" style="max-width: 140rpx;">{{item.xm}}</view>
					<view class="d-flex-1 d-m-l-66" style="font-weight: bold;">{{item.zjhm}}</view>
					<view style="margin-right: 84rpx;"><u--image width="32rpx" height="32rpx" src="/static/icon/icon-53.png"></u--image></view>
					<u--image width="19rpx" height="32rpx" src="/static/icon/icon-52.png"></u--image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { groupDetaile, groupMembers } from '../../../common/api.js';
export default {
	data() {
		return {
			id: null,
			info: null,
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: []
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.init();
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getData().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			groupDetaile({
				id: this.id
			}).then(e => {
				this.info = e.data;
			});
			this.pageNum = 1;
			this.getData().then(e => {
				this.pageLast = Math.ceil(e.total / this.pageSize);
				this.list = e.data;
			});
		},
		getData() {
			return groupMembers({
				params: {
					id: this.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
			});
		},
		search() {
			uni.$u.route({
				url: '/pages/index/team/search'
			});
		},
		memberDetail(item) {
			uni.$u.route({
				url: '/pages/index/member/memberDetail',
				params: {
					id: item.id
				}
			});
		}
	}
};
</script>

<style lang="scss"></style>
